<template>
	<div class="Nav_box">
		<div class="top_menu_more" @click="transform()">
			+
			<div class="more_shadow"></div>
		</div>
		<ul class="nav">
			<li v-for="(item,index) in this.$store.state.list" @click="tab(item,index)" :class="{active:index==num}">{{item.name}}</li>
		</ul>
	</div>
</template>

<script>
export default{
	data(){
		return {
			num:this.$route.query.id,
			active:'active',
		}
	},
	mounted(){
		if(this.$route.path=="/"){
			this.$router.push({
				name:'recommend',
				query:{
					name:'message',
					id:0
				}
			});
			this.$store.commit('first_init',{
					url:"/message"
				})
			this.num = 0
			}else{
				var l_url = this.$route.query.name;
				this.$store.commit('first_init',{
					url:l_url
				})
			}
	},
	methods:{
		tab(item,index){
			this.$store.commit('recover')
			document.scrollingElement.scrollTop=0
			this.num = index;
			this.$router.push({
				name:'recommend',
				query:{
					name:item.e_name,
					id:item.num
				}
			})
			var c_url = this.$route.query.name
			this.$store.commit('first_init',{
					url:c_url
				})
		},
	}
}
</script>

<style lang="scss">
	.Nav_box{
		    background: #f4f5f6;
		    height: 38px;
		    width: 100%;
		    position: fixed;
		    z-index: 999;
		    top: 46px;
		.nav{
			white-space: nowrap;
			overflow: hidden;
			background: #f4f5f6;
			line-height: 36px;
			overflow-x:scroll;
			&::-webkit-scrollbar{
				display: none;
			}
			li{
				display: inline-block;
				font-size: 18px;
				margin:0 3%;
				color: #505050;
			}
			.active{
					color: #f85959;
			}
		}
		.top_menu_more{
			position: relative;
			float: right;
			width: 11%;
			height: 37px;
			font-size: 30px;
			color: #f85959;
			line-height: 37px;
			text-align: center;
			.more_shadow{
				background: url(../assets/shadow.png) no-repeat center right;
				position: absolute;
			    width: 10px;
			    height: 36px;
			    left: -10px;
			    top: 0;
			    background-size: contain;
			    background-color: rgba(244, 245, 246, 0.3);
			}
		}
	}
</style>